﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CF.Web.Ext.Net.XTableName.Default" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%--<%@ Register src="UCEdit.ascx" tagname="UCEdit" tagprefix="uc1" %>
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   
    <script type="text/javascript">
        var Msg_Title = '系统提示';
        var Befor_Del = '确认要删除数据吗？<br>可能会删除与之相关的数据!<br>按【否】可以还能避免，确认一定要删除请按【是】';
        var changeState = function (d) {
            var iconSrc = d == '1' ? "tick.png" : "cross.png";
            return "<img src='/images/" + iconSrc + "' />";
        };

        var checkDelete = function (d) {
            if (d.length < 5) {
                Ext.net.Notification.show({
                    hideFx: { fxName: 'switchOff', args: [{}] },
                    showFx: { args: ['C3DAF9', 1, { duration: 2.0}], fxName: 'frame' },
                    pinEvent: 'click',
                    alignToCfg: { offset: [0, 10], position: 't-t' },
                    html: "请至少选择一项！",
                    title: Msg_Title
                });
                return;
            } else {
                Ext.MessageBox.confirm(Msg_Title, Befor_Del, function (btn) {
                    if (btn == "yes") {
                        XTableName.DeleteSelected(d);
                    }
                });
            }
        }

        var commandHandler = function (command, record) {
            if (command == "Edit") { return true; }
            if (command == "Delete") {
                Ext.Msg.confirm(Msg_Title, Befor_Del, function (btn) {
                    if (btn == "yes") {
                        return true;
                    }
                    else { return false; }
                });
            }
            return true;
        }

        var change = function (d) {
            var template = '<span style="color:{0};">{1}</span>';
            var isTrue = d == '1';
            d = isTrue ? '是' : '否';
            return String.format(template, isTrue ? "green" : "red", d);
        };

        var cellCommand = function (grid, record, command, rowIndex) {
            switch (command) {
                case "Edit": XTableName.EditInfo(record.data.id); break;
                case "Delete":
                    Ext.Msg.confirm(Msg_Title, Befor_Del, function (btn) { if (btn == "yes") { XTableName.DeleteInfo(record.data.id); } }); break;
                case "Scale": XTableName.ChangeState(record.data.id, command); break;
                case "Hot": XTableName.ChangeState(record.data.id, command); break;
            }
        };

    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" DirectMethodNamespace="XTableName" />

        <ext:Store runat="server" ID="XTableClassNameDS">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="NameCN" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>

        <ext:Store ID="Store1" runat="server" OnRefreshData="RefreshDS" RemoteSort="True">
            <Proxy>
                <ext:PageProxy />
            </Proxy>
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="Title" />
                        <ext:RecordField Name="Cid" />
                        <ext:RecordField Name="ClassName" />
                        <ext:RecordField Name="Hot" />
                        <ext:RecordField Name="Scale" />
                        <ext:RecordField Name="Click" />
                        <ext:RecordField Name="CreatedDate"/>
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                <ext:Parameter Name="limit" Value="20" Mode="Raw"/>
            </AutoLoadParams>
            <SortInfo Field="CreatedDate" Direction="DESC" />
            <Listeners> 
                <LoadException Handler="Ext.MessageBox.alert('Load failed', response.statusText);" />                            
            </Listeners>
        </ext:Store>
        <ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
            <Items>
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StoreID="Store1"
            Title="Employees" 
            AutoExpandColumn="Title" Header="False" Frame="true" Height="500">
            <ColumnModel runat="server">
			    <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column Header="标题" DataIndex="Title" Width="150" />
                    <ext:Column Header="类别" DataIndex="ClassName" Width="80" />
                    <ext:Column Header="推荐" DataIndex="Hot" Width="50">
                        <Renderer Fn="changeState" />
                        <Commands>
                            <ext:ImageCommand CommandName="Hot" Icon="ArrowSwitchBlueGreen">
                                <ToolTip Text="点击可改变状态" />
                            </ext:ImageCommand>
                        </Commands>
                    </ext:Column>
                    <ext:Column Header="显示" DataIndex="Scale" Width="50">
                        <Renderer Fn="changeState" />
                        <Commands>
                            <ext:ImageCommand CommandName="Scale" Icon="ArrowSwitchBlueGreen">
                                <ToolTip Text="点击可改变状态" />
                            </ext:ImageCommand>
                        </Commands>
                    </ext:Column>
                    <ext:Column Header="点击" DataIndex="Click" Width="50" />
                    <ext:Column Header="添加日期" DataIndex="CreatedDate" Width="150" />
                    <ext:CommandColumn Width="55" Hideable="false">
                        <Commands>
                            <ext:GridCommand CommandName="Edit" Icon="NoteEdit" Text="编辑">
                                <ToolTip Text="编辑该条记录" />
                            </ext:GridCommand>
                        </Commands>
                    </ext:CommandColumn>
                    <ext:CommandColumn Width="55" Hideable="false">
                        <Commands>
                            <ext:GridCommand CommandName="Delete" Icon="Delete" Text="删除">
                                <ToolTip Text="删除该条记录" />
                            </ext:GridCommand>
                        </Commands>
                    </ext:CommandColumn>
			    </Columns>
            </ColumnModel>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Hidden ID="txtFilter" runat="server" AutoDataBind="true">
                            <Listeners>
                                <Change Handler="Store1.reload();" Delay="30" />
                            </Listeners>
                        </ext:Hidden>
                        <ext:ComboBox ID="searchCid" runat="server" FieldLabel="类别" LabelWidth="35" LabelAlign="Right" Editable="false" StoreID="XTableClassNameDS" DisplayField="NameCN" ValueField="id" EmptyText="请选择...">
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                            </Triggers>
                            <Listeners>
                                <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                <TriggerClick Handler="if(index == 0) { this.focus().clearValue(); trigger.hide(); #{txtFilter}.setValue(''); }" />
                                <Select Handler="this.triggers[0].show(); #{txtFilter}.setValue('searchValue='+#{txtSearch}.getValue() + '&cid=' + this.getValue());" />
                                <Blur Handler="if(Ext.isEmpty(this.getText())) { this.setValue(''); #{txtFilter}.setValue(''); };" />
                            </Listeners>
                        </ext:ComboBox>
                        <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                        <ext:TriggerField ID="txtSearch" runat="server" EmptyText=" 全文搜索.." EnableKeyEvents="true">
                            <Listeners>
                                <KeyDown Buffer="200" Handler="if(!Ext.isEmpty(this.getValue())) { this.triggers[0].show(); #{txtFilter}.setValue('cid='+#{searchCid}.getValue() + '&searchValue=' + this.getValue());}" />
                                <TriggerClick Handler="if (index == 1) { #{txtFilter}.setValue(this.getValue()); } if(index == 0) { #{txtSearch}.reset(); #{txtFilter}.setValue(''); this.triggers[0].hide(); }" />
                            </Listeners>
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                <ext:FieldTrigger Icon="Search" />
                            </Triggers>
                        </ext:TriggerField>
                        <ext:ToolbarFill runat="server" />
                        <ext:Button ID="BtnAddInfo" runat="server" Text="添加" Icon="Add">
                            <DirectEvents>
                                <Click OnEvent="BtnAddInfo_Click" />
                            </DirectEvents>
                        </ext:Button>
                        <ext:Button ID="BtnDeleteInfo" runat="server" Text="批量删除" Icon="Exclamation">
                            <Listeners>
                                <Click Handler="checkDelete(Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true})));" />
                            </Listeners>
                            <%--<DirectEvents>
                                <Click OnEvent="BtnDeleteInfo_Click">
                                    <Confirmation ConfirmRequest="false" Title="提醒" Message="确认要删除数据吗？<br>可能会删除与之相关的数据!<br>按【否】可以还能避免，确认一定要删除请按【是】" />
                                    <ExtraParams>
                                        <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))" Mode="Raw" />
                                    </ExtraParams>
                                </Click>
                            </DirectEvents>--%>
                        </ext:Button>
                        <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                        <ext:Button runat="server" Text="更改推荐状态" Icon="ArrowSwitchBlueGreen">
                            <Menu>
                                <ext:Menu ID="MenuChangeHot" runat="server">
                                    <Items>
                                        <ext:MenuItem ID="HotTrue" runat="server" Text="推荐" Icon="BulletTick" />
                                        <ext:MenuItem ID="HotFalse" runat="server" Text="不推荐" Icon="BulletCross" />
                                    </Items>
                                    <Listeners>
                                        <ItemClick Handler="XTableName.ChangeAllState(Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true})),menuItem.id);" />
                                    </Listeners>
                                </ext:Menu>
                            </Menu>
                        </ext:Button>
                        <ext:Button ID="BtnChangeScale" runat="server" Text="更改显示状态" Icon="ArrowSwitchBlueGreen">
                            <Menu>
                                <ext:Menu ID="Menu1" runat="server">
                                    <Items>
                                        <ext:MenuItem ID="ScaleTrue" runat="server" Text="显示" Icon="BulletTick" />
                                        <ext:MenuItem ID="ScaleFalse" runat="server" Text="不显示" Icon="BulletCross" />
                                    </Items>
                                    <Listeners>
                                        <ItemClick Handler="XTableName.ChangeAllState(Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true})),menuItem.id);" />
                                    </Listeners>
                                </ext:Menu>
                            </Menu>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <SelectionModel>
               <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />                   
            </SelectionModel>
            <LoadMask ShowMask="true" />
            <SaveMask ShowMask="true" />
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="20">
                    <Items>
                        <ext:Label runat="server" Text="每页显示:" />
                        <ext:ToolbarSpacer runat="server" Width="10" />
                        <ext:ComboBox Editable="false" runat="server" Width="80">
                            <Items>
                                <ext:ListItem Text="10" />
                                <ext:ListItem Text="20" />
                                <ext:ListItem Text="50" />
                                <ext:ListItem Text="100" />
                            </Items>
                            <SelectedItem Value="20" />
                            <Listeners>
                                <Select Handler="#{PagingToolBar1}.pageSize = parseInt(this.getValue()); #{PagingToolBar1}.doLoad();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:PagingToolbar>
            </BottomBar>
            <Listeners>
                <Command Handler="cellCommand(this, record, command, rowIndex)" />
            </Listeners>        
        </ext:GridPanel>
        </Items>
        </ext:Viewport>
        <ext:Window ID="EditWindow" runat="server" Icon="Group" Title="编辑数据" Width="650" Height="500" AutoShow="false" Modal="false" Collapsible="true" Hidden="true" Layout="Fit" LabelWidth="70">
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" DeferredRender="false">
                    <Items>
                        <ext:FormPanel ID="ArticleForm" MonitorValid="true" runat="server" Title="编辑数据" Icon="ChartOrganisation" Padding="5" Layout="Form" LabelAlign="Right" LabelWidth="70" MonitorResize="true">
                            <Items>
                                <ext:Hidden ID="txtID" runat="server" />
                                <ext:TextField ID="txtTitle" FieldLabel="标题" AnchorHorizontal="98%" EmptyText="请输入内容.." AllowBlank="false" runat="server" />
                                <ext:ComboBox ID="txtCid" Editable="false" StoreID="XTableClassNameDS" FieldLabel="类别" DisplayField="NameCN" ValueField="id" EmptyText="请选择..." AnchorHorizontal="30%" AllowBlank="false" runat="server">
                                    <Template Visible="False" EnableViewState="False"></Template>
                                </ext:ComboBox>
                                <ext:TextField ID="txtSource" FieldLabel="来源" AnchorHorizontal="98%" runat="server" />
                                <ext:TextField ID="txtKeyword" FieldLabel="关键词" AnchorHorizontal="98%" runat="server" />
                                <ext:CheckboxGroup ID="CheckboxGroup1" runat="server" ColumnsNumber="2" FieldLabel="选项" AnchorHorizontal="50%">
                                    <Items>
                                        <ext:Checkbox ID="txtHot" FieldLabel="推荐" runat="server" />
                                        <ext:Checkbox ID="txtScale" FieldLabel="显示" runat="server" />
                                    </Items>
                                </ext:CheckboxGroup> 
                                <ext:DateField ID="txtCreatedDate" FieldLabel="发布日期" AnchorHorizontal="30%" runat="server" Disabled="True" DateFormat="yyyy-MM-dd HH:mm:ss" />
                                <ext:HtmlEditor ID="txtContent" FieldLabel="详细内容" AnchorHorizontal="98%" runat="server" AnchorVertical="60%" />
                            </Items>
                            <Listeners>
                                <ClientValidation Handler="#{SaveButton}.setDisabled(!valid);" />
                            </Listeners>
                        </ext:FormPanel>
                    </Items>
                </ext:TabPanel>
            </Items>
            <Buttons>
                <ext:Button ID="SaveButton" runat="server" Text="保存" Icon="Disk">
                    <DirectEvents>
                        <Click OnEvent="SaveEmployee" Failure="Ext.MessageBox.alert('出错啦！', '请不要尝试非法操作！');">
                            <EventMask Target="CustomTarget" CustomTarget="={#{EditWindow}.body}" ShowMask="True" />
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button ID="CancelButton" runat="server" Text="返回" Icon="Cancel">
                    <Listeners>
                        <Click Handler="#{EditWindow}.hide(null);" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Window>
    </form>
</body>
</html>
